<template>
    <div class="container-fluild">
        <div class="row long-row">
            <!-- 当前为新闻动态和发展历程页面时，标题为黑色 -->
            <span class="title" :class="{ 'black': props.flag == 'new' || props.flag == 'history' }">{{ props.title
            }}</span>
            <img :src="imgUrl" alt="" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import useHomeStore from '@/store/modules/home.ts'

const homeStore = useHomeStore()

let imgUrl = ref('') // 图片地址

const props = defineProps(['title', 'flag'])

onMounted(() => {
    getBannerItem()
})
// 获取头部大图数据
const getBannerItem = async () => {
    await homeStore.getBannerItem()
    const bannerItem = homeStore.bannerItem.find((item: any) => item.name == props.flag)
    imgUrl.value = bannerItem.imgUrl
}
</script>

<style scoped lang=scss>
.long-row {
    position: relative;
    overflow: hidden;

    .title {
        position: absolute;
        z-index: 9;
        top: 50%;
        margin-top: -26px;
        left: 50%;
        margin-left: -80px;
        font-size: 40px;
        font-family: "Source Han Sans CN";
        font-weight: 300;
        color: #fff;
        user-select: none;
    }

    .black {
        color: #333;
    }

    img {
        width: 100%;
        transition: transform 2s linear;
    }

    &:hover img {
        transform: scale(1.12);
    }

}
</style>